<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right">                  
      </div>
    </div>
    <div class="content-wrap">
      <div class="above">
        <div class="menzhen income">
          <div class="desc">门诊收入</div>
          <div class="num">22223万元</div>
        </div>
        <div class="chartbar" ref="menzhengchart">这是图表</div>
      </div>
      <div class="bottom">
        <div class="yiyuan income">
          <div class="desc">医院收入</div>
          <div class="num">12232万元</div>
        </div>
        <div class="chartbar" ref="yiyuanchart">这是图表</div>
      </div>          
    </div>
    <img src="@/assets/images/card819.png" class="card819" alt="">
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'
import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-single-analysis1-huanzhenianling',
  components:{Fragment},
  props:{
    title:{
      type:String
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    makeData(){
      const percent = 0.4;
      const data8=[{
        value: percent,
          itemStyle: {
              normal: {
                  color: '#4406EF',
                  shadowBlur: 10,
                  shadowColor: '#4406EF'
              }
          }
      }, {
          value: 1 - percent,
          itemStyle: {
              normal: {
                  color: 'transparent'
              }
          }
      }];
      const option8={
          backgroundColor: '',
          title: {
              text: (percent * 100) + '%',
              x: 'center',
              y: 'center',
              textStyle: {
                  color: '#98a0c4',
                  fontWeight: 'bolder',
                  fontSize: 12,
              }
          },
          series: [{
                  type: 'pie',
                  radius: ['64%', '69%'],
                  silent: true,
                  label: {
                      normal: {
                          show: false,
                      }
                  },

                  data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: '#313443',
                              shadowBlur: 5,
                              shadowColor: '#1b1e25',


                          }
                      }
                  }],

                  animation: false
              },

              {
                  type: 'pie',
                  radius: ['64%', '69%'],
                  silent: true,
                  label: {
                      normal: {
                          show: false,
                      }
                  },

                  data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: '#313443',
                              shadowBlur: 5,
                              shadowColor: '#1b1e25'
                          }
                      }
                  }],
              
                  animation: false
              },

              {
                  name: 'main',
                  type: 'pie',
                  radius: ['80%', '85%'],
                  label: {
                      normal: {
                          show: false,
                      }
                  },
                  data: data8,
                  
                  animationEasingUpdate: 'cubicInOut',
                  animationDurationUpdate: 500
              }
          ]
      };

      this.makeGraph(this.$refs.menzhengchart,option8)



      const percent2 = 0.6
      const data9=[{
        value: percent2,
          itemStyle: {
              normal: {
                  color: '#4406EF',
                  shadowBlur: 10,
                  shadowColor: '#4406EF'
              }
          }
      }, {
          value: 1 - percent2,
          itemStyle: {
              normal: {
                  color: 'transparent'
              }
          }
      }];
      const option9={
          backgroundColor: '',
          title: {
              text: (percent2 * 100) + '%',
              x: 'center',
              y: 'center',
              textStyle: {
                  color: '#98a0c4',
                  fontWeight: 'bolder',
                  fontSize: 12,
              }
          },
          series: [{
                  type: 'pie',
                  radius: ['64%', '69%'],
                  silent: true,
                  label: {
                      normal: {
                          show: false,
                      }
                  },

                  data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: '#313443',
                              shadowBlur: 10,
                              shadowColor: '#1b1e25',


                          }
                      }
                  }],

                  animation: false
              },

              {
                  type: 'pie',
                  radius: ['64%', '69%'],
                  silent: true,
                  label: {
                      normal: {
                          show: false,
                      }
                  },

                  data: [{
                      value: 1,
                      itemStyle: {
                          normal: {
                              color: '#313443',
                              shadowBlur: 50,
                              shadowColor: '#1b1e25'
                          }
                      }
                  }],
                  animation: false
              },

              {
                  name: 'main',
                  type: 'pie',
                  radius: ['80%', '85%'],
                  label: {
                      normal: {
                          show: false,
                      }
                  },
                  data: data9,
                  animationEasingUpdate: 'cubicInOut',
                  animationDurationUpdate: 500
              }
          ]
      };


      this.makeGraph(this.$refs.yiyuanchart,option9)


    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .36rem) ;
      float: left;
      overflow: hidden;
    }


    .num{
      color:#ffffff;
      font-size: .2rem;
    }
    .desc{
      color:#69C4E3;
      padding-bottom: .13rem;
      font-size: .14rem;
    }
    .above{
      padding-left:.6rem;
      margin-left:.2rem;
      .menzhen{
        background: url('~@/assets/images/iocn_decorate.png') no-repeat;
        background-position: 0 center;
        padding-left: .5rem;
      }
    }
    .bottom{
      margin-left:.2rem;
      padding-left:.6rem;
      .yiyuan {
        padding-left:.6rem;
        background: url('~@/assets/images/iocn_decorate.png') no-repeat;
        background-position: 0 center;
      }
    }
    .income,.chartbar{
      display: inline-block;
    }
    .income{padding-right: .55rem;}

    .chartbar{
      vertical-align: middle;
      height: .9rem;
      width: .9rem;
      font-size: .12rem;
      text-align: center;
      line-height: .9rem;
    }






  }
  img{width: 100%;float: left;}
</style>